<template>
  <div class="container">
    <topNav :toLastPath="true">个人认证</topNav>
    <ul>
      <li>
        <span>姓名</span>
        <input type="text" name="name" placeholder="请输入真实姓名" v-model="name">
      </li>
      <li>
        <span>身份证号码</span>
        <input type="text" name="name" placeholder="请输入真实身份证号码" v-model="number">
      </li>
      <!-- <li>
        <span>手机号</span>
        <input type="tel" name="name" placeholder="请输入手机号">
      </li> -->
      <li>
        <router-link :to="{'path':'/me/authentication/imageUpload','query':{'type':'personal'}}">
          <span>身份证照片</span>
          <span>上传照片</span><span>></span>
        </router-link>
      </li>
    </ul>
    <div class="commit" @click="commit">
      <div :class="{blue:blue}">保存</div>
    </div>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
export default {
  data () {
    return {
      number:"",
      name:"",
      tag:""
    }
  },

  components: {
    topNav
  },
  computed:{
    imageUpload:{
      get: function () {
        return this.$store.state.modulesMe.imageUpload
      },
      set: function (newValue) {
        this.$store.dispatch('setImageUpload',newValue)
      }
    },
    blue(){
      if(this.number!=""&&this.name!=""&&this.imageUpload!=""){
        return true
      }else{
        return false
      }
    },
    cardFront:{
      get: function () {
        return this.$store.state.modulesMe.cardFront
      },
      set: function (newValue) {
        this.$store.dispatch('setCardFront',newValue)
      }
    },
    cardReverse:{
      get: function () {
        return this.$store.state.modulesMe.cardReverse
      },
      set: function (newValue) {
        this.$store.dispatch('setCardReverse',newValue)
      }
    },
  },
  methods: {
    async commit(){
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios.post('/cert/setPersonalAuth',{idcard_num:this.number,realname:this.name,idcard_front_id:this.imageUpload[0],idcard_back_id:this.imageUpload[1],user_token:userToken});
      if(res.data.level=="success"){
        await this.$currency.showToast('你的认证已经提交',3000,'success')
        setTimeout(()=>{
          this.$router.push(`/me/authentication`)
        },3500)
      }else{
        this.$currency.showToast(res.data.message,3000,'fail')
      }
    }
  },
  async mounted(){
    if(this.imageUpload==""){
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios('/cert/getPersonalAuth',{params:{user_token:userToken}});
      let data=res.data.data;
      this.name=data.realname;
      this.number=data.idcard_num;
      if(data.idcard_front_url!=='https://wx.zhaowea.com/images/default_img.png'){
          this.cardFront.src=data.idcard_front_url;
          this.cardReverse.src=data.idcard_back_url
      }
      
      this.cardFront.id=data.idcard_front_id
      this.cardReverse.id=data.idcard_back_id
      this.imageUpload[0]=data.idcard_front_id
      this.imageUpload[1]=data.idcard_back_id
    }
    
  },

}

</script>

<style scoped>
.container ul{width: 100%;padding-top: 45px;}
.container ul li{width: 100%;height: 20px;display: flex;justify-content: row;padding: 20px 0px;}
.container ul li span{width: 100px;font-size: 17px;color: #000000;letter-spacing: 30px;padding-left: 25px;}
.container ul li:nth-of-type(2) span{letter-spacing: 0px;}
.container ul li:nth-of-type(3) span{letter-spacing: 8px;}
.container ul li input{width: 265px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li:nth-of-type(3) span{letter-spacing: 0px;}
.container ul li:nth-of-type(3) span:nth-of-type(2),.container ul li span:nth-of-type(3){font-size:17px;color: #B2B2B9;}
.container ul li:nth-of-type(3) span:nth-of-type(2){width:60px;margin-left: 135px;font-size:12px;}
.container ul li:nth-of-type(3) span:nth-of-type(3){padding-left: 0px;width: 5px;line-height: 17px;margin-left:10px;}

.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #D5D5DF 0%, #9292A2 100%);border-radius: 8px;margin: 12.5px auto;}
.commit div.blue{background-image:linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);}
</style>
